<script setup>
import { ref } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import AllTires from "@/views/components/AllTires.vue";
import TabsSimple from "@/components/TabsSimple.vue";
import RoadHazard from "./components/RoadHazard.vue";
import Mileage from "./components/Mileage.vue";
import Manufacturer from "./components/Manufacturer.vue";
//images
import vueMkHeader from "@/assets/img/warranty/header-bg.png";
import contentBg from "@/assets/img/products/badlands/bg.png";
let activeId = ref(1);

const changeTab = (id) => {
    activeId.value = id;
    console.log("id", id);
};
const tabList = [
    {
        id: 1,
        name: "ROAD HAZARD",
    },
    {
        id: 2,
        name: "MILEAGE WARRANTY",
    },
    {
        id: 3,
        name: "MANUFACTURER’S WARRANTY",
    },
];
</script>

<template>
    <div class="position-sticky z-index-sticky top-0 w-100">
        <NavbarDefault transparent />
    </div>
    <Header>
        <div class="page-header min-vh-55" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-12">
                        <h1 class="text-f-ERASBD text-white text-title-size uppercase">WARRANTY</h1>
                    </div>
                </div>
            </div>
        </div>
    </Header>
    <div :style="`background: url(${contentBg}) no-repeat bottom / cover`">
        <div class="container pb-4">
            <TabsSimple :tabList="tabList" @changeTab="changeTab" />
            <div v-if="activeId == 1">
                <RoadHazard />
            </div>
            <div v-else-if="activeId == 2">
                <Mileage />
            </div>
            <div v-else-if="activeId == 3">
                <Manufacturer />
            </div>
        </div>
    </div>

    <AllTires />
</template>
